<template>
  <el-card class="m20">
    <!-- --------------列表和删除功能------------------------->
    <!-- 搜索表单区域 -->
    <el-form
      label-width="100px"
      label-position="left"
      :inline="true"
      size="small"
    >
      <el-form-item label="广告图描述">
        <el-input
          placeholder="请输入广告位名称"
          v-model="queryData.advimgdesc"
        ></el-input>
      </el-form-item>
      <el-form-item label="广告图位置">
        <el-select
          placeholder="请选择广告位"
          v-model.trim="queryData.advimgpos"
        >
          <el-option
            v-for="item in allAdvPosList"
            :key="item.id"
            :label="item.advposname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="searchSubmit"
          >搜索</el-button
        >
        <el-button size="small" @click="searchReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 工具条区域 -->
    <el-row type="flex" justify="space-between">
      <div class="lt">
        <el-button
          icon="el-icon-plus"
          size="small"
          plain
          type="primary"
          @click="$refs.addForm.isShow = true"
          >添加</el-button
        >
      </div>
      <div class="rt"></div>
    </el-row>
    <br />
    <!-- 表格区域 -->
    <el-table :data="list" border stripe>
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="advposname" label="广告图位置"></el-table-column>
      <el-table-column prop="advimgdesc" label="广告图描述"></el-table-column>
      <el-table-column prop="advimgsrc" label="广告图">
        <template slot-scope="{ row }">
          <img :src="row.advimgsrc" style="width: 120px" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="advimglink" label="广告图链接"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="success"
            size="small"
            circle
            icon="el-icon-edit"
            @click="editRow(row.id)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            circle
            icon="el-icon-delete"
            @click="delRow(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page.sync="queryData.page"
      :page-sizes="[10, 40, 80, 100]"
      :page-size="queryData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>
    <!-- --------------新增和修改功能------------------------->
    <advImgForm
      ref="addForm"
      :allPosition="allAdvPosList"
      @updateList="initData"
    />
  </el-card>
</template>

<script>
import advImgForm from "./components/advImgForm";
import { delAdvImgApi, getAdvImgListApi } from "@/api/advImg";
import { getAdvPosAllApi } from "@/api/advpos";
export default {
  components: { advImgForm },
  data() {
    return {
      queryData: {
        advimgdesc: "",
        advimgpos: "",
        page: 1,
        limit: 10,
      },
      list: [], // 表格数据
      total: 0, // 总数
      allAdvPosList: [], // 所有广告位
    };
  },
  created() {
    this.initData();
    this.allAdvPosData();
  },
  methods: {
    // 获取数据
    async initData() {
      // 发起网络请求
      let res = await getAdvImgListApi(this.queryData);
      // console.log(res);

      // 整理数据
      res.data = res.data.map((item) => {
        item.advimgsrc = process.env.VUE_APP_WEB_URL + "/" + item.advimgsrc;
        return item;
      });
      // 赋值变量
      this.list = res.data;
      this.total = res.count;
    },

    async allAdvPosData() {
      let res = await getAdvPosAllApi();
      this.allAdvPosList = res;
    },
    // 搜索提交
    searchSubmit() {
      this.queryData.page = 1;
      this.initData();
    },
    // 搜索重置
    searchReset() {
      this.queryData = {
        advimgdesc: "",
        advimgpos: "",
        page: 1,
        limit: 10,
      };
      this.initData();
    },
    // 页码切换事件
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },

    // 修改
    editRow(id) {
      // 调用修改回显的方法
      this.$refs.addForm.replyViewData(id);
    },
    // 删除
    async delRow(id) {
      // console.log(id);
      // 1. 提示确认框
      await this.$confirm("确认删除么？");
      // 2. 发起删除请求
      await delAdvImgApi(id);
      // 3. 提示成功
      this.$message.success("删除成功");
      // 4. 边缘处理(不是第一页，且该页面只有一条数据，页码要 - 1)
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      // 5. 重新获取页面
      this.initData()
    },
  },
};
</script>

<style scoped></style>
